<template>
  <!-- <h1>会员批量导入</h1> -->
   <el-upload
      class="upload-demo"
      drag
      action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
      multiple
    >
      <el-icon class="el-icon--upload"><upload-filled /></el-icon>
      <div class="el-upload__text">
        Drop file here or <em>click to upload</em>
      </div>
      <!-- <template #tip>
        <div class="el-upload__tip">
          jpg/png files with a size less than 500kb
        </div>
      </template> -->
    </el-upload>
    <div class="m">
         <h4><strong>说明</strong></h4>
         <p>1.点击下载导入会员导入模板<a href="../download/会员导入模板.xlsx">会员导入模板xIsx</a></p>
         <p>2.请按照模板中的格式上传</p>
         <p>3.若导入表中有手机号在当前系统中已存在，则会跳过(不会覆盖原来的信息)</p>
         <p>4.如果怕误操作,请联系客服人员帮您,当然是免费的哟~</p>
     </div>
   
      <el-table :data="tableData" style="width: 100%; margin-top: 20px;" height="150" size="small"  border>
        <el-table-column fixed prop="name" sortable label="会员名"/>
        <el-table-column prop="phone" sortable label="会员手机号码"  />
        <el-table-column prop="importResult" sortable label="导入结果"  />
        <el-table-column prop="failCause"  sortable label="失败原因" />
      </el-table>
        
</template>

<script setup>
import {ref,reactive} from 'vue'
import { UploadFilled } from '@element-plus/icons-vue'


const tableData = [
  {
    "name": "张三",
    "phone": "13812345678",
    "failCause": "手机号格式不正确",
    "importResult": "失败"
  },
  {
    "name": "李四",
    "phone": "13987654321",
    "failCause": "",
    "importResult": "成功"
  },
  {
    "name": "王五",
    "phone": "13600001111",
    "failCause": "手机号已存在",
    "importResult": "失败"
  },
  {
    "name": "赵六",
    "phone": "13522223333",
    "failCause": "",
    "importResult": "成功"
  },
  {
    "name": "钱七",
    "phone": "13744445555",
    "failCause": "系统错误，请稍后重试",
    "importResult": "失败"
  }
]
</script>
<style lang="less" scoped>
.m{
  margin:  15px;
  h4{
    margin: 0 0 10px;
  }
  p{
    margin:0 0 10px;
  }
}
</style>
